<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物领养系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>宠物领养系统</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">宠物领养</a></li>
                <li><a href="#">宠物论坛</a></li>
                <li><a href="#">科普文章</a></li>
                <li><a href="#">管理员</a></li>
            </ul>
        </nav>
        <div class="search">
            <input type="text" placeholder="搜索">
            <button>搜索</button>
            <button id = "viewAdoptedPetsButton">查看我的领养</button>
        </div>
    </header>

    <main>
        <section class="pet-card">
            <img src="dog.jpg" alt="茶多酚">
            <h2>茶多酚 公 4岁</h2>
            <p>是否绝育：是</p>
            <p>疫苗接种：已接种</p>
            <p>身体状态：良好</p>
            <p>其他描述：安静温顺</p>
            <button onclick="applyForAdoption('茶多酚')">申请领养</button>
        </section>

        <section class="pet-card">
            <img src="dog2.jpg" alt="萌萌">
            <h2>萌萌 母 6个月</h2>
            <p>是否绝育：否</p>
            <p>疫苗接种：已接种</p>
            <p>身体状态：健康</p>
            <p>其他描述：小家伙们熟悉新环境后变得很亲人，非常适合带回家。</p>
            <button onclick="applyForAdoption('萌萌')">申请领养</button>
        </section>

        <section class="pet-card">
            <img src="dog3.jpg" alt="笨笨">
            <h2>笨笨 母 2岁</h2>
            <p>是否绝育：否</p>
            <p>疫苗接种：已接种</p>
            <p>身体状态：健康</p>
            <p>其他描述：小家伙们熟悉新环境后变得很亲人，非常适合带回家。</p>
            <button>申请领养</button>
        </section>
    </main>
     
    <div id="adopted-pets-list" class="adopted-pets-list">
        <!-- 已领养的宠物列表将在这里显示 -->
</div>
    <script src="script.js"></script>
</body>
</html>